<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      /* content样式 */
      /* .comment-container {
            padding: 0 0.35rem 0 0.35rem
        } */
      /* title样式 */
      .page-content {
        background-color: #fcfcfc;
      }
      .comment-page-content-container {
        padding: 0.46rem 0.64rem 0.48rem 0.32rem;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }
      .comment-title {
        font-size: 0.3rem;
        color: rgba(3, 3, 3, 1);
      }
      .coment-type-container {
        margin-top: 0.3rem;
        font-size: 0.24rem;
        color: rgba(157, 157, 157, 1);
      }
      .comment-price {
        color: rgb(236, 86, 86);
      }
      .comment-click-rate {
        padding: 0.74rem 0 0.48rem;
        text-align: center;
        font-size: 0.28rem;
        color: rgba(68, 68, 68, 1);
      }
      /* 评价星星样式 */
      .van-rate .van-icon {
        background-color: #fcfcfc !important;
      }
      .van-rate {
        display: block;
        margin: 0 auto;
        margin-bottom: 0.48rem;
        text-align: center;
      }
      /* 输入框样式 */
      [class*='van-hairline']::after {
        border: none;
      }
      .van-cell-group {
        padding: 0 0.32rem;
        background-color: #fcfcfc !important;
      }
      .van-cell__value--alone {
        height: 3.37rem;
        border: 1px solid rgba(228, 228, 228, 1);
      }
      .van-field__body {
        height: 100%;
      }
      .van-field__control {
        padding: 0.32rem 0.26rem;
        height: 100%;
        color: rgba(154, 155, 157, 1);
      }
      .van-cell {
        padding: 0;
      }
      /* footer背景色 */
      .comment-footer {
        height: 0.98rem;
        background-color: #fff;
      }
      /* 匿名评价选择样式 */
      .van-checkbox {
        padding-left: 0.32rem;
      }
      .van-checkbox__label {
        font-size: 0.28rem;
        color: rgba(51, 51, 51, 1);
      }
      .van-checkbox__icon {
        display: inline-block;
      }
      .van-icon {
        background-color: #fff;
      }
      .van-checkbox {
        height: 100%;
      }
      .van-button {
        width: 2.86rem;
        height: 0.98rem;
        line-height: 0.98rem;
        font-size: 0.3rem;
      }
      .page-bottom {
        box-shadow: 0 0 0.2rem 0 rgba(200, 200, 200, 0.5);
      }

      .van-rate__item {
        display: inline-block !important;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- ************************ 头 *************************** -->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">评价</div>
            <div class="header-right"></div>
          </div>
        </div>
      </div>
      <!-- ************************* 内容 *********************** -->
      <div class="page-content comment-container">
        <div class="placeholder"></div>
        <!-- loading页面 -->
        <div v-if="isShowZLLoading" class="zl-loading">
          <img
            class="zl-loading-img"
            src="../../common/image/white.png"
            alt=""
          />
        </div>
        <div class="comment-page-content-container">
          <p class="comment-title">{{ orderInfo.coursename }}</p>
          <div class="flex-wrap flex-justify-between coment-type-container">
            <div>分类：{{ orderInfo.catename }}</div>
          </div>
        </div>
        <div class="comment-click-rate">点击星星评分</div>
        <van-rate
          v-model="rateValue"
          :size="25"
          gutter="0.36rem"
          color="#FFAA00"
          void-icon="star"
          void-color="#eee"
        >
        </van-rate>
        <van-cell-group>
          <van-field
            v-model="value"
            @input="input"
            type="textarea"
            maxlength="500"
            @focus="inputFocus"
            @blur="inputBlur"
          ></van-field>
        </van-cell-group>
      </div>
      <!-- *************** 脚部*********** -->
      <div class="page-bottom">
        <div class="comment-footer flex-wrap flex-justify-between">
          <div>
            <van-checkbox
              v-model="checked"
              checked-color="rgb(252, 69, 69)"
              icon-size="0.48rem"
              @click.native="anonymous"
              >匿名评价</van-checkbox
            >
          </div>
          <div>
            <van-button type="default" color="#FF7D11" @click="complete"
              >提交评价</van-button
            >
          </div>
        </div>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/user.service.js"></script>
    <script src="../../common/js/utils.js"></script>
    <script>
      const vantComponents = [
        'Lazyload',
        'Button',
        'Checkbox',
        'CheckboxGroup',
        'Field',
        'Rate',
        'Toast'
      ]

      vantComponents.forEach(component => {
        Vue.use(vant[component])
      })

      new Vue({
        el: '#app',
        components: {},
        data: {
          // from: order表示从订单页面跳转而来 完成评论再跳回到订单页面 不然就是从课程页面而来 完成评论再跳回课程页面
          from: '',
          // 订单信息
          orderInfo: {},
          courseId: '',
          orderId: '',
          // 匿名提交按钮勾选状态
          checked: false,
          // 输入框的值
          value: '有什么话想对老师说的吗~来说说吧 (至少5个字)',
          valueResult: '',
          // 几星评价值
          rateValue: 0,
          // 是否匿名评价 0不匿名 1匿名
          hideName: 0,
          isShowZLLoading: true
        },
        computed: {},
        methods: {
          // 返回按钮
          goBack() {
            window.history.back(-1)
          },
          // 匿名评价
          anonymous() {
            // 对匿名相关进行操作
            if (this.checked === false) {
              this.hideName = 1
            } else {
              this.hideName = 0
            }
          },
          // 提交按钮事件
          complete() {
            // 提交请求
            if (this.rateValue === 0) {
              this.$toast('请点击星星评分')
              return
            }
            if (this.valueResult === '') {
              this.$toast('请输入评价内容')
              return
            }
            if (this.valueResult.length < 5) {
              this.$toast('评论字数太少')
              return
            }
            const obj = {
              courseid: this.courseId,
              star: this.rateValue,
              content: this.value,
              hideName: this.hideName
            }
            if (this.orderId) {
              obj.orderid = this.orderId
            }
            userService.completeComment(obj).then(res => {
              if (!res.code) {
                if (this.from === 'order') {
                  location.href = './order.html'
                } else {
                  location.href = `../courseCenter/videoCourse.html?courseid=${this.courseId}`
                }
              } else {
                this.$toast(res.message)
              }
            })
          },
          // 输入框输入事件
          input(value) {
            // 输入框输入的值改变的时候
          },
          inputFocus() {
            if (this.valueResult === '') {
              this.value = ''
            }
          },
          inputBlur() {
            this.valueResult = this.value
          }
        },
        created() {
          const queryObj = utils.getQuery(location.href)
          this.courseId = queryObj.courseid
          if (queryObj.from) {
            this.from = queryObj.from
          }
          if (queryObj.orderid) {
            this.orderId = queryObj.orderid
          }

          userService.getCommentOrderInfo(queryObj).then(res => {
            this.orderInfo = res
            this.isShowZLLoading = false
          })
        }
      })
    </script>
  </body>
</html>
